<template>
  <div>
    <el-container>
      <el-header
        style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;"
      >
        <div>
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span class="primary">套餐导入</span>
        </div>
      </el-header>
      <div class="pd10">
        <div style="align-items: center;margin: 10px; margin-left: 20px">
          <el-row :gutter="24" style="margin-bottom: 10px">
            <el-date-picker
              v-model="shippingDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button
              style="margin-left: 10px"
              type="info"
              :loading="clicked"
              @click="importClick"
            >导入套餐</el-button>
          </el-row>
        </div>
        <div class="details_card" :style="{height:tabsHeight+'px'}">
        <div style="position: relative">
          <div style="position: sticky;top: 0;z-index: 999;padding-top: 20px;background-color: white;padding-bottom: 20px">
            <div class="table_Header">
              <el-row :gutter="24">
                <el-col :span="2">
                  <div class="justify_left">
                    <span class="table_HeaderTitle">发货日期</span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="align_items">
                    <span class="table_HeaderTitle">订单号</span>
                  </div>
                </el-col>

                <el-col :span="6">
                  <div class="align_items">
                    <span class="table_HeaderTitle">客户信息</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="align_items">
                    <span class="table_HeaderTitle">发货状态</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="align_items">
                    <span class="table_HeaderTitle">商品总数</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="align_items">
                    <span style="text-align: center" class="table_HeaderTitle">结算运费</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="align_items">
                    <span style="text-align: center" class="table_HeaderTitle">结算货款</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="align_items">
                    <span style="text-align: center" class="table_HeaderTitle">供应商</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="justify_right">
                    <span class="table_HeaderTitle">操作</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="table_List" v-for="item in shippingForm">
            <div class="table_ListHeader">
              <div class="align_items">
                <span class="table_ListHeaderTitle">送货单号：{{item.sn}}</span>
              </div>
              <div class="align_items">
                <span class="table_ListHeaderTitle">配送方式：{{item.shippingMethod|watchShippingMethod}}</span>
              </div>
            </div>
            <div style="padding: 10px">
              <el-row :gutter="24">
                <el-col :span="2">
                  <div class="justify_left shop_Height">
                    <span style="text-align: left" class="table_ContentTitle">{{item.orderDate | dateFormatter}}</span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="align_items shop_Height">
                    <span class="table_ContentTitle">{{item.orderSn}}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div style="display: flex;flex-direction: column;justify-content: center" class="shop_Height">
                    <span class="table_ContentTitle">{{item.consignee}} {{item.phone}}</span>
                    <el-tooltip class="item" effect="dark" :content="item.address" placement="top">
                      <span style="margin-top: 5px" class="table_ContentTitle">{{item.address}}</span>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="align_items shop_Height">
                    <span class="table_ContentTitle">{{statusDescr}}</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="align_items shop_Height">
                    <span class="table_ContentTitle">{{item.subQuantity}}</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="justify_left shop_Height">
                    <span class="table_ContentTitle">{{item.shippingFreight}}</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="justify_left shop_Height">
                    <span class="table_ContentTitle">{{item.subCost}}</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="justify_left shop_Height">
                    <span class="table_ContentTitle">{{item.supplierName}}</span>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="justify_right shop_Height" @click="detailsClick(item.id)">
                    <a class="details_Title">订单详情</a>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      </div>
    </el-container>
  </div>
</template>

<script>
  import {EventBus} from '@/api/eventBus'
  import {orderPlanImport} from '@/api/shipping'
  import utils from '../../utils/utils.js'
  export default {
    name: 'shipping-import',
    created() {

    },
    data(){
      return{
        query: {
          date: [],
        },
        clicked:false,
        shippingDate:'',
        shippingForm:[],
        tabsHeight:null,
        checked: false, //防止双击
        pickerOptions: {//时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    filters: {
      watchShippingMethod(val){
        if (val == 0) {
          return '普通快递'
        } else if (val == 1) {
          return '到店提货'
        } else if (val == 2) {
          return '同城快送'
        }
      },
      warehouseType(val) {
        if (val == 1) {
          return '采购入库'
        } else if (val == 2) {
          return '采购退货'
        } else if (val == 3) {
          return '调拨入库'
        } else if (val == 4) {
          return '销售出库'
        } else if (val == 5) {
          return '销售退货'
        } else if (val == 6) {
          return '调拨出库'
        } else if (val == 7) {
          return '盘点损益'
        } else if (val == 8) {
          return '其他出库'
        }
      },
      status(val) {
        if (val == 0) {
          return '未确认'
        } else if (val == 1) {
          return '已派单'
        } else if (val == 2) {
          return '已发货'
        } else if (val == 3) {
          return '已送达'
        } else if (val == 4) {
          return '已完成'
        } else if (val == 5) {
          return '已关闭'
        }
      }
    },
    mounted() {
      this.comeIn();
      this.beforeMount()
    },
    methods:{
      importClick () { // 查看物流
        this.clicked=true

        var _this = this
        if (this.shippingDate ==''){
          this.$message({
            message: "请选择日期！！！",
            type: "warning"
          });
          this.clicked=false
          return
        }
        let params = new URLSearchParams()
        params.append('shippingDate', this.shippingDate)
        orderPlanImport(params).then(res => {
          console.log(res)
          _this.shippingForm = res.data
          this.clicked=false
        }).catch(err => {
          this.clicked=false
          console.log(err)
        })
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.tabsHeight = h - 234
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.tabsHeight = h - 234
          })();
        };
      },
      detailsClick(data) {
        this.$router.push({
          path: '/shipping/view', query: {id: data}
        })
      },
    }
  }
</script>

<style scoped>
  .table_Header {
    width: 100%;
    background-color: #f5f7fa;
    padding: 10px;
  }

  .table_HeaderTitle {
    font-size: 12px;
    color: #353535;
    font-weight: 600;
  }

  .table_List {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #f2f2f2;
  }

  .table_ListHeader {
    width: 100%;
    padding: 10px;
    background-color: #f5f7fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .table_ListHeaderTitle {
    font-size: 12px;
    color: #888888;
  }

  .align_items {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .justify_left {
    display: flex;
    align-items: center;
  }

  .justify_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .table_ContentTitle {
    font-size: 12px;
    color: #353535;
    width: 100%;
    text-align: center;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shop_Height {
    min-height: 30px;
  }

  .details_Title {
    font-size: 14px;
    color: #409EFF;
  }
  .details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    margin-top: 20px;
  }

  .details_card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
</style>
